<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-gengduo-copy" @tap="backPage"></view> -->
			<view class="sweep iconfont icon-caiyouduo_saoyisao"></view>
			<view class="logo">
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
			<view class="sweep"></view>
		</view>
		
		
		<view class="bg_box">
			<view class="bg01"></view>		
			<view class="bg_content">
				<swiper class="swiper_box" :autoplay="true" :interval="3000" :duration="200" indicator-dots="true" indicator-color="rgba(255, 119, 1, .2)" indicator-active-color="#089396">
					<block v-for="(item, index) in info" :key="index">
						<swiper-item style="height: 100%;">
							<view class="swiper-item" style="height: 100%;"><image src="../../static/img01/banner01.png" mode="scaleToFill"></image></view>
						</swiper-item>
					</block>
				</swiper>
				
				<view class="swiper_box02">
					<view class="notice">
						<view class="icon_box"><view class="icon iconfont icon-gonggaoguanli"></view></view>				
						<swiper class="swiper_box03" :autoplay="true" :interval="3000" :duration="1000" vertical="true">
							<block v-for="(item, index) in nesData" :key="index">
								<swiper-item style="height: 100%;" :data-url="'/pages/index/notice?type=' + item.id + '&title=' + item.name" @click="gotopage">
									<view class="content_text">{{ item.text }}</view>
								</swiper-item>
							</block>
						</swiper>
						<!-- <view class="more iconfont" data-url="/pages/personage/notice" @click="gotopage">&#xe60e;</view> -->
					</view>
				</view>
				
				<view class="nav">
					<block v-for="(item, index) in menus" :key="'menus' + index">
						<view class="menu" :data-url="item.url" @click="gotopage">
							<image :src="item.img" mode="widthFix"></image>
							<view class="text">{{ item.text }}</view>
						</view>
					</block>
				</view>
				
				<view class="beam_box">
					<image src="../../static/img01/bg02.png" mode="widthFix"></image>
				</view>
				
				<block v-for="(item, index) in 6" :key="'goods' + index">
				<view class="goods_list" data-url="/pages/goods/goods" @click="gotopage">
					<view class="goods_bg">
						<image src="../../static/img01/bg04.png" mode="widthFix"></image>
					</view>
					<view class="goods_content">
						<view class="goods_img">
							<view class="edge">
								<image src="../../static/img01/bg01.png" mode="scaleToFill"></image>
							</view>
							<view class="img">
								<image src="../../static/img01/cp01.png" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="goods_text">
							<view class="title">特级紫红袍茶叶浓香型礼盒装500g（62泡）</view>
							<view class="text">醇厚饱满 喉韵悠长 三礼盒装 按月发货 </view>
							<view class="no_money">原价：1388.0</view>
							<view class="money_box">
								<view class="money">
									<view class="r">￥</view>
									<view class="m">1200.0</view>
								</view>
								<view class="menu">
									<image src="../../static/img01/bg03.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				</block>
				
			</view>
		</view>

		
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrrol:false,
			page:1,
			select: 0,
			info: [
				{
					image: 'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/banner01.png',
					content: '内容 A',
					url: '/pages/index/activity/activity'
				},
				{
					image: 'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/banner01.png',
					content: '内容 B',
					url: '/pages/index/share'
				},
			],
			nesData:[
				{
					text:'欢迎进入清正园商城，于今日正式上线公测 !'
				},
				{
					text:'欢迎进入清正园商城，于今日正式上线公测 !'
				},
				{
					text:'欢迎进入清正园商城，于今日正式上线公测 !'
				}
			],
			menus: [
				{
					img: '../../static/menu/menu01.png',
					text: '关于我们',
					url: '/pages/add/add?type=' + 0
				},
				{
					img: '../../static/menu/menu02.png',
					text: '我的团队',
					url: '/pages/add/add?type=' + 1
				},
				{
					img: '../../static/menu/menu03.png',
					text: '订单管理',
					url: '/pages/index/service'
				},
				{
					img: '../../static/menu/menu04.png',
					text: '分享好友',
					url: '/pages/add/add?type=' + 2
				},			
			],
		};
	},
	onLoad(options) {
	  let that = this;
	},
	onShow() {
		let that = this;
		//that.loadData()
	},
	methods: {
		loadData(){
			let that = this;
			that.Net._get('user/addresses', {per_page:'10',page:that.page}, res => {
				if(res.code == 200){
					  //console.log(res)
						that.address = res.data.data;
				}
			});
		},
		backPage() {
			uni.navigateBack({});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		}
		
	 
		
	},
	onPageScroll: function(Object) {
		//console.log(Object.scrollTop); //实时获取到滚动的值
		if (Object.scrollTop > 28) {
			this.scrrol = true;
			/* #ifdef APP-PLUS */
			/* #endif */
		} else if (Object.scrollTop < 28) {
			this.scrrol = false;
			/* #ifdef APP-PLUS */
			/* #endif */
		}
	},
	
};
</script>

<style>
	
	.header{
		height: 13.5vw;
		display: flex;
		align-items: center;
		background-color: transparent !important;		
	}
	
	.scrrolHeader{
		background-color: #024D4F !important;
	}
	
	.header .sweep{
		font-size: 6vw;
		color: #fff;
		width: 13vw;
		text-align: center;
	}
	
	.header .logo{
		flex: 1;
		text-align: center;
	}
	
	.header .logo image{
		width: 26vw;
		
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
		height: calc(40vw + var(--status-bar-height));
		background-color: #024D4F;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 99;
		padding-bottom: 15vw;
	}
	
	.swiper_box{
		width: 100%;
		height: 40vw;
	}
	
	.swiper_box image{
		width: 100%;
	}
	
	.swiper_box02 {
		width: 100%;
		margin: 0 auto;
		height: 12vw;
		margin: 4% auto;
		position: relative;
		background-color: #E0ECEA;
		box-sizing: border-box;
		border-radius: 2vw;
		box-sizing: border-box;
	}
	
	.swiper_box02 .more {
		font-size: 4vw;
		color: #333;
		height: 100%;
		width: 13vw;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	.swiper_box03 {
		width: 80%;
		height: 10.5vw;
	}
	
	.swiper_box02 .notice {
		width: 100%;
		height: 12vw;
		display: flex;
	}
	
	.swiper_box02 .notice .icon_box {
		display: flex;
		justify-content: center;
		margin-left: 4%;
		margin-right: 2vw;
	}
	
	.swiper_box02 .notice .icon_box .icon {
		font-size: 6vw;
		color: #089396;
		line-height: 12vw;
		margin-right: 1vw;
	}
	
	.swiper_box02 .notice .icon_box .text {
		font-size: 4vw;
		color: #fff;
		line-height: 10.5vw;
		font-weight: bold;
	}
	
	.swiper_box02 .notice .content_text {
		font-size: 3.5vw;
		color: #004345;
		line-height: 12vw;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 4%;
	}
	
	.nav::after {
		flex: auto;
		content: '';
	}
	
	.nav .menu {
		width: 25%;
		flex-basis: auto;
		text-align: center;
		margin-bottom: 3vw;
	}
	
	.nav .menu image {
		width: 14vw !important;
		height: 14vw !important;
		border: 50%;
	}
	
	.nav .menu .text {
		width: 100%;
		text-align: center;
		font-size: 3.5vw;
		color: #4F4842;
		margin-top: 1vw;
	}
	
	.beam_box{
		width: 100%;
		margin-top: 4%;
	}
	
	.beam_box image{
		width: 100%;
		display: block;
	}
	
	.goods_list{
		width: 100%;
		position: relative;
		margin-bottom: 3vw;
	}
	
	.goods_list .goods_bg{
		width: 100%;
		display: block;
	}
	
	.goods_list .goods_bg image{
		width: 100%;
		display: block;
	}
	
	.goods_list .goods_content{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		padding: 4vw;
		box-sizing: border-box;
	}
	
	.goods_list .goods_content .goods_img{
		width: 31.5vw;
		height: 31.5vw;
		position: relative;
		margin-right: 3vw;
	}
	
	.goods_list .goods_content .goods_img .edge{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 98;
		width: 100%;
		height: 100%;
	}
	
	.goods_list .goods_content .goods_img .edge image{
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.goods_list .goods_content .goods_img .img{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 97;
		width: 100%;
		height: 100%;
	}
	
	.goods_list .goods_content .goods_img .img image{
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.goods_list .goods_content .goods_text{
		flex: 1;
	}
	
	.goods_list .goods_content .goods_text .title{
		font-size: 4.2vw;
		color: #fff;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.goods_list .goods_content .goods_text .text{
		font-size: 2.8vw;
		color: #EFCCA7;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-top: 2vw;
	}
	
	.goods_list .goods_content .goods_text .no_money{
		font-size: 2.8vw;
		color: #EFCCA7;
		font-weight: bold;		
		margin-top: 2vw;
		text-decoration: line-through;
	}
	
	.goods_list .goods_content .goods_text .money_box{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 1vw;
	}
	
	.goods_list .goods_content .goods_text .money_box .money{
		flex: 1;
		display: flex;
		align-items: flex-end;
	}
	
	.goods_list .goods_content .goods_text .money_box .money .r{
		font-size: 3vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 0.5vw;
	}
	
	.goods_list .goods_content .goods_text .money_box .money .m{
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
	}
	
	.goods_list .goods_content .goods_text .money_box .menu{
		width: 22vw;
	}
	
	.goods_list .goods_content .goods_text .money_box .menu image{
		width: 100%;
		display: block;
	}


</style>
